<template>
  <div>
    <div class="tuwen_box">
      <div class="flex">
        <div>触摸动画</div>
        <div>
          <el-switch v-model="active_component.propValue.active_animation">
          </el-switch>
        </div>
      </div>
      <div class="flex">
        <div>模块阴影</div>
        <div>
          <el-switch v-model="active_component.propValue.boxShadow">
          </el-switch>
        </div>
      </div>

      <el-table :data="active_component.propValue.list" style="width: 100%">
        <el-table-column prop="img" label="图片" width="300">
          <template slot-scope="scope">
            <div class="flex">
              <el-input v-model="scope.row.img"></el-input>
              <Upload
                :text="'上传图片'"
                :type="'primary'"
                @confrim="
                  (e) => {
                    confrim(e, scope.$index);
                  }
                "
              ></Upload>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题">
          <template slot-scope="scope">
            <el-input v-model="scope.row.title"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="内容">
          <template slot-scope="scope">
            <el-input v-model="scope.row.content"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="delitem(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="addBtn">
        <el-button
          @click="addItem"
          type="primary"
          size="small"
          icon="el-icon-plus"
          >新增</el-button
        >
      </div>
    </div>
    <div class="flex-center" style="margin-top: 10px">
      <el-button size="small" type="" @click="closeTK">取消</el-button>
      <el-button size="small" type="primary" @click="pushcanvas"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
import Upload from "../Upload/index.vue";

export default {
  props: ["componentId", "componentList", "activeCompont"],
  components: { Upload },
  data() {
    return {
      name: "",
      active_component: {},
    };
  },

  created() {
    if (this.activeCompont) {
      this.active_component = this.activeCompont;
    } else {
      for (let key in this.componentList) {
        if (
          this.componentList[key].isDialog &&
          this.componentList[key].propValue.value == this.componentId
        ) {
          this.active_component = JSON.parse(
            JSON.stringify(this.componentList[key])
          );
        }
      }
    }
  },

  methods: {
    closeTK() {
      this.$emit("closeTK");
    },
    confrim(e, i) {
      this.active_component.propValue.list[i].img = e;
    },
    delitem(i) {
      this.active_component.propValue.list.splice(i, 1);
    },
    addItem() {
      this.active_component.propValue.list.push({
        img: "https://ejarwebtools.oss-cn-hangzhou.aliyuncs.com/image/1660126337410advantage_dcb@2x.png",
        title: "标题",
        content: "内容",
      });
    },
    pushcanvas() {
      if (this.activeCompont) {
        this.$emit("closeTK"); //关闭弹框
      } else {
        let canvasStyle = this.$store.state.canvasStyleData;
        let component = this.active_component;
        component.style.top = Number(canvasStyle.height);
        component.style.left = 0;
        this.$store.commit("addComponent", { component: component });
        canvasStyle.height = String(
          Number(canvasStyle.height) + Number(component.style.height)
        );
        this.$store.commit("setCanvasStyle", canvasStyle);
        this.$emit("closeTK"); //关闭弹框
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.addBtn {
  margin-top: 20px;
}
</style>

